.arcade-1 {
    width: 45px;
    height: 30px;
    animation: a1 2s infinite linear;
}

@keyframes a1 {

    0%,
    25% {
        background:
            linear-gradient(#e50021 0 0) 50% 0/66% 100% no-repeat
    }

    25.1%,
    50% {
        background:
            linear-gradient(#004ce4 0 0) 0 0/100% 50% no-repeat,
            linear-gradient(#004ce4 0 0) 0 0/33% 100% no-repeat
    }

    50.1%,
    75% {
        background:
            linear-gradient(#00e622 0 0) 100% 0/66% 50% no-repeat,
            linear-gradient(#00e622 0 0) 0 100%/66% 50% no-repeat
    }

    75.1%,
    100% {
        background:
            linear-gradient(#9d0be6 0 0) 0 100%/100% 50% no-repeat,
            linear-gradient(#9d0be6 0 0) 50% 0 /33% 50% no-repeat
    }
}

.arcade-2 {
    width: 45px;
    height: 30px;
    background:
        linear-gradient(#004ce4 0 0) 0 100%/100% 50%,
        linear-gradient(#004ce4 0 0) 0 0 /calc(100%/3) 100%;
    background-repeat: no-repeat;
    position: relative;
    clip-path: inset(-100% 0 0 0);
    animation: a2-0 2s infinite steps(4);
}

.arcade-2::before,
.arcade-2::after {
    content: "";
    position: absolute;
    inset: -50% 0 50%;
    background:
        linear-gradient(#00e622 0 0) 0 0 /calc(2*100%/3) 50%,
        linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: a2-1;
}

.arcade-2::after {
    inset: -100% 0 100%;
    background:
        linear-gradient(#e50021 0 0) 0 0/100% 50%,
        linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%;
    background-repeat: no-repeat;
    animation-name: a2-2;
}

@keyframes a2-0 {
    0% {
        transform: translateY(-250%);
        clip-path: inset(100% 0 0 0)
    }

    25%,
    100% {
        transform: translateY(0);
        clip-path: inset(-100% 0 0 0)
    }
}

@keyframes a2-1 {

    0%,
    25% {
        transform: translateY(-250%)
    }

    50%,
    100% {
        transform: translateY(0)
    }
}

@keyframes a2-2 {

    0%,
    50% {
        transform: translateY(-250%)
    }

    75%,
    100% {
        transform: translateY(0)
    }
}

.arcade-3 {
    width: 80px;
    height: 70px;
    border: 5px solid #000;
    padding: 0 8px;
    background:
        linear-gradient(#fff 0 0) 0 0/8px 20px,
        linear-gradient(#fff 0 0) 100% 0/8px 20px,
        radial-gradient(farthest-side, #fff 90%, #0000) 0 5px/8px 8px content-box,
        #000;
    background-repeat: no-repeat;
    animation: a3 2s infinite linear;
}

@keyframes a3 {
    25% {
        background-position: 0 0, 100% 100%, 100% calc(100% - 5px)
    }

    50% {
        background-position: 0 100%, 100% 100%, 0 calc(100% - 5px)
    }

    75% {
        background-position: 0 100%, 100% 0, 100% 5px
    }
}

.arcade-4 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #000 98%, #0000) 55% 20%/8px 8px no-repeat,
        #ffcc00;
    box-shadow: 2px -6px 12px 0px inset rgba(0, 0, 0, 0.7);
    animation: a4 .5s infinite steps(5) alternate;
}

@keyframes a4 {
    0% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 100% 65%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 35%)
    }
}

.arcade-5 {
    width: 90px;
    height: 24px;
    padding: 2px 0;
    display: flex;
    animation: a5-0 3s infinite steps(6);
    background:
        linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
        radial-gradient(circle 3px, #eeee89 90%, #0000) 0 0/20% 100% #000;
    overflow: hidden;
}

.arcade-5::before {
    content: "";
    width: 20px;
    transform: translate(-100%);
    border-radius: 50%;
    background: #ffff2d;
    animation:
        a5-1 .25s .153s infinite steps(5) alternate,
        a5-2 3s infinite linear;
}

@keyframes a5-1 {
    0% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 100% 65%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 35%)
    }
}

@keyframes a5-2 {
    100% {
        transform: translate(90px)
    }
}

@keyframes a5-0 {
    100% {
        background-size: 120% 100%, 20% 100%
    }
}


.arcade-6 {
    width: 80px;
    height: 60px;
    background:
        linear-gradient(#fff 0 0) left /calc(50% - 15px) 8px no-repeat,
        linear-gradient(#fff 0 0) right/calc(50% - 15px) 8px no-repeat,
        conic-gradient(from 135deg at top, #0000, red 1deg 90deg, #0000 91deg) bottom/14px 8px repeat-x,
        #000;
    border-bottom: 2px solid red;
    position: relative;
    overflow: hidden;
    animation: a6-0 1s infinite linear;
}

.arcade-6::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: lightblue;
    left: -5px;
    animation:
        a6-1 2s infinite cubic-bezier(0, 100, 1, 100),
        a6-2 2s infinite linear;
}

@keyframes a6-0 {
    50% {
        background-position: left, right, bottom -2px left -4px
    }
}

@keyframes a6-1 {

    0%,
    27% {
        bottom: calc(50% + 4px)
    }

    65%,
    100% {
        bottom: calc(50% + 4.1px)
    }
}

@keyframes a6-2 {
    100% {
        left: 100%
    }
}


.arcade-7 {
    width: 70px;
    height: 50px;
    background:
        conic-gradient(from 135deg at top, #0000, #fff 1deg 90deg, #0000 91deg) right -20px bottom 8px/18px 9px,
        linear-gradient(#fff 0 0) bottom/100% 8px,
        #000;
    background-repeat: no-repeat;
    border-bottom: 8px solid #000;
    position: relative;
    animation: a7-0 2s infinite linear;
}

.arcade-7::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: lightblue;
    left: 10px;
    animation: a7-1 2s infinite cubic-bezier(0, 200, 1, 200);
}

@keyframes a7-0 {
    100% {
        background-position: left -20px bottom 8px, bottom
    }
}

@keyframes a7-1 {

    0%,
    50% {
        bottom: 8px
    }

    90%,
    100% {
        bottom: 8.1px
    }
}

.arcade-8 {
    font-size: 17px;
    font-family: monospace;
    font-weight: bold;
    background:
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0);
    background-size: calc(1ch + 1px) 100%;
    background-repeat: no-repeat;
    border-bottom: 10px solid #0000;
    position: relative;
    animation: a8-0 3s infinite linear;
    clip-path: inset(-20px 0);
}

.arcade-8::before {
    content: "Loading";
}

.arcade-8::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: #25adda;
    left: -10px;
    bottom: 100%;
    animation: a8-1 3s infinite linear;
}

@keyframes a8-0 {

    0%,
    12.5% {
        background-position: calc(0*100%/6) 0, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    25% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    37.5% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    50% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    62.5% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    75% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    87.4% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 0
    }

    100% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 40px
    }
}

@keyframes a8-1 {
    100% {
        left: 115%
    }
}

.arcade-9 {
    font-size: 17px;
    font-family: monospace;
    font-weight: bold;
    background:
        linear-gradient(#000 0 0) left,
        linear-gradient(#000 0 0) right;
    background-repeat: no-repeat;
    border-right: 5px solid #0000;
    border-left: 5px solid #0000;
    background-origin: border-box;
    position: relative;
    animation: a9-0 2s infinite;
}

@keyframes a9-0 {

    0%,
    25% {
        background-size: 50% 100%
    }

    25.1%,
    75% {
        background-size: 0 0, 50% 100%
    }

    75.1%,
    100% {
        background-size: 0 0, 0 0
    }
}

.arcade-9::before {
    content: "Loading";
}

.arcade-9::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 22px;
    height: 60px;
    background:
        linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0) bottom /22px 20px,
        linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px left 0/22px 6px,
        linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
        linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
    background-repeat: no-repeat;
    animation: a9-1 2s infinite;
}

@keyframes a9-1 {
    25% {
        background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: 0
    }

    25.1% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: 0
    }

    50% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75% {
        background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75.1% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }
}

.arcade-10 {
    font-size: 17px;
    font-family: monospace;
    font-weight: bold;
    padding: 30px 2px 50px;
    background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat;
    position: relative;
    overflow: hidden;
    animation: a10-0 2s infinite cubic-bezier(1, 175, .5, 175);
}

@keyframes a10-0 {

    0%,
    30% {
        background-position: 0 0px
    }

    50%,
    100% {
        background-position: 0 -0.2px
    }
}

.arcade-10::before {
    content: "Loading";
}

.arcade-10::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 28px;
    top: 110%;
    left: calc(50% - 16px);
    background:
        linear-gradient(90deg, #0000 12px, #f92033 0 22px, #0000 0 26px, #fdc98d 0 32px, #0000) bottom 26px left 50%,
        linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0) bottom 24px left 50%,
        linear-gradient(90deg, #0000 10px, #643700 0 16px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 24px, #000 0 26px, #f92033 0 32px, #0000 0) bottom 22px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 14px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 28px, #f92033 0 32px, #0000 0) bottom 20px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 16px, #fdc98d 0 22px, #000 0 24px, #fdc98d 0 30px, #f92033 0 32px, #0000 0) bottom 18px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 12px, #fdc98d 0 20px, #000 0 28px, #f92033 0 30px, #0000 0) bottom 16px left 50%,
        linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0) bottom 14px left 50%,
        linear-gradient(90deg, #fdc98d 6px, #f92033 0 14px, #222a87 0 16px, #f92033 0 22px, #222a87 0 24px, #f92033 0 28px, #0000 0 32px, #643700 0) bottom 12px left 50%,
        linear-gradient(90deg, #fdc98d 6px, #f92033 0 16px, #222a87 0 18px, #f92033 0 24px, #f92033 0 26px, #0000 0 30px, #643700 0) bottom 10px left 50%,
        linear-gradient(90deg, #0000 10px, #f92033 0 16px, #222a87 0 24px, #feee49 0 26px, #222a87 0 30px, #643700 0) bottom 8px left 50%,
        linear-gradient(90deg, #0000 12px, #222a87 0 18px, #feee49 0 20px, #222a87 0 30px, #643700 0) bottom 6px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0) bottom 4px left 50%,
        linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0) bottom 2px left 50%,
        linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0px left 50%;
    background-size: 34px 2px;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: a10-1;
}

@keyframes a10-1 {

    50%,
    100% {
        top: 109.5%
    }
}